<template>
    <div class="about">
        <el-container>
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <h2><img class="title" :src="res.meirihaodian.title.pic" :alt="res.meirihaodian.title.h2">
                            <small>{{ res.meirihaodian.title.small }}</small></h2>
                        <el-row :gutter="10">
                            <el-col :span="12" v-for="(item,index) in res.meirihaodian.pics" :key="index">
                                <h3>{{ item.title }}</h3>
                                <el-row :gutter="2">
                                    <el-col :span="16">
                                        <a href="">
                                            <img class="pic" :src="item.imgs[0].src" alt="">
                                        </a>
                                    </el-col>
                                    <el-col :span="8">
                                        <a href="" class="mb-2">
                                            <img class="pic2" :src="item.imgs[1].src" alt="">
                                        </a>
                                        <a href="">
                                            <img class="pic2" :src="item.imgs[2].src" alt="">
                                        </a>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <h2><img class="title" :src="res.taobaozhibo.title.pic" :alt="res.taobaozhibo.title.h2"> <small>{{ res.taobaozhibo.title.small }}</small></h2>
                        <el-row :gutter="10">
                            <el-col :span="12" v-for="(item,index) in res.taobaozhibo.pics" :key="index">
                                <h3>{{ item.title }} <small>{{ item.see }}</small></h3>
                                <el-row :gutter="2">
                                    <el-col :span="16">
                                        <a href="">
                                            <img class="pic" :src="item.imgs[0].src" alt="">
                                        </a>
                                    </el-col>
                                    <el-col :span="8">
                                        <a href="" class="mb-2">
                                            <img class="pic2" :src="item.imgs[1].src" alt="">
                                        </a>
                                        <a href="">
                                            <img class="pic2" :src="item.imgs[2].src" alt="">
                                        </a>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    //模拟请求到的数据
    let dataSource = {
        "meirihaodian": {
            "title": {
                "pic": require("../assets/home/title1.png"),
                "h2": "每日好店",
                "small": "发现深藏的好店"
            },
            "pics": [{
                    "title": "万能集市",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/home/1.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/2.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/3.webp")
                        }
                    ]
                },
                {
                    "title": "淘宝江湖",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/home/4.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/5.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/6.webp")
                        }
                    ]
                },
                {
                    "title": "深藏不露",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/home/7.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/8.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/9.webp")
                        }
                    ]
                },
                {
                    "title": "高手林立",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/home/10.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/11.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/12.webp")
                        }
                    ]
                }
            ]
        },
        "taobaozhibo": {
            "title": {
                "pic": require("../assets/home/title2.png"),
                "h2": "淘宝直播",
                "small": "你的爱豆直播等你哟！"
            },
            "pics": [{
                    "title": "aj1黑脚趾",
                    "see": "10382观看",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/home/13.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/14.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/15.webp")
                        }
                    ]
                },
                {
                    "title": "青青河边草真皮",
                    "see": "8965观看",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/home/16.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/17.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/18.webp")
                        }
                    ]
                },
                {
                    "title": "涵木家",
                    "see": "4412观看",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/home/19.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/20.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/21.webp")
                        }
                    ]
                },
                {
                    "title": "厂家优品",
                    "see": "5771观看",
                    "imgs": [{
                            "link": "",
                            "src": require("../assets/home/22.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/23.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/home/24.webp")
                        }
                    ]
                }
            ]
        }
    };

    export default {
        data() {
            return {
                res: dataSource
            };
        }
    };
</script>

<style>
    .el-container {
        width: 1200px;
        margin: auto;
    }

    h3 {
        font-size: 16px;
        font-weight: 300;
    }

    small {
        font-size: 12px;
        color: #999;
        font-weight: 300;
    }

    a {
        display: block;
    }

    img {
        display: block;
        width: 100%;
    }

    .pic {
        height: 180px;
    }

    .pic2 {
        height: 89px;
    }

    .mb-2 {
        margin-bottom: 2px;
    }

    .title {
        height: 24px;
        display: inline-block;
        width: auto;
    }

    h2 small {
        position: relative;
        top: -8px;
    }

</style>
